<!-- vue3 -->
<!-- 封装svg组件 -->
<template>
  <!-- svg 为使用根标签 图标大小放在svg 标签中-->
  <!-- svg得配合use标签使用 xlink:href属性值是：#icon-svg文件名，fill属性为图标颜色 -->
  <svg class="svg-icon" :class="name">
    <use :xlink:href="prefix + name"></use>
  </svg>
</template>

<script setup lang="ts">
//接收父组件传来的参数
defineProps({
  // 接收父组件传来的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  // 接收父组件传来的svg文件名
  name: {
    type: String,
    default: 'default'
  },
  // 接收父组件传来的图标颜色
  color: {
    type: String,
    default: '#ffffff'
  },
  // 接收父组件传来的图标宽度
  width: {
    type: String,
    default: '20px'
  },
  // 接收父组件传来的图标高度
  height: {
    type: String,
    default: '20px'
  }
});
</script>

<style scope>
.svg-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentcolor;
}
</style>
